<template>
  <div class="login-container">
    <div class="login-form-wrapper">
      <div class="login-header">
        <div class="logo-container">
          <img src="@/assets/images/common/logo.svg" alt="logo" class="logo-img" />
          <h1 class="system-title">{{ t('common.welcome') }}</h1>
        </div>
        <p class="system-description">{{ t('login.title') }}</p>
      </div>
      
      <a-form
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        class="login-form"
        @finish="handleSubmit"
      >
        <a-form-item name="username">
          <a-input 
            v-model:value="loginForm.username" 
            :placeholder="t('login.usernamePlaceholder')"
            size="large"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-input>
        </a-form-item>
        
        <a-form-item name="password">
          <a-input-password 
            v-model:value="loginForm.password" 
            :placeholder="t('login.passwordPlaceholder')"
            size="large"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </a-input-password>
        </a-form-item>
        
        <a-form-item name="rememberMe" class="remember-me">
          <a-checkbox v-model:checked="loginForm.rememberMe">
            {{ t('login.rememberMe') }}
          </a-checkbox>
          <a class="forgot-password">{{ t('login.forgotPassword') }}</a>
        </a-form-item>
        
        <a-form-item>
          <a-button 
            type="primary" 
            html-type="submit" 
            :loading="loading" 
            class="login-button"
            size="large"
            block
          >
            {{ t('login.login') }}
          </a-button>
        </a-form-item>
        
        <div class="language-selector">
          <a-dropdown>
            <a class="language-link">
              <GlobalOutlined />
              <span class="language-text">{{ languageName }}</span>
            </a>
            <template #overlay>
              <a-menu @click="changeLanguage">
                <a-menu-item key="zh-CN">简体中文</a-menu-item>
                <a-menu-item key="en-US">English</a-menu-item>
                <a-menu-item key="fr-FR">Français</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { UserOutlined, LockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import { useAuthStore } from '@/stores/auth'
import { useAppStore } from '@/stores/app'
import type { LoginRequest } from '@/types/api/auth'

// 定义组件名称
defineOptions({
  name: 'Login'
})

// 获取路由信息
const router = useRouter()
const route = useRoute()

// 国际化
const { t } = useI18n()
const appStore = useAppStore()

// 用户状态
const authStore = useAuthStore()

// 表单引用
const loginFormRef = ref<FormInstance>()

// 加载状态
const loading = ref(false)

// 登录表单数据
const loginForm = reactive<LoginRequest>({
  username: '',
  password: '',
  rememberMe: true
})

// 表单验证规则
const rules: Record<string, any[]> = {
  username: [
    { required: true, message: t('login.usernameRequired'), trigger: 'blur' },
    { min: 3, max: 20, message: t('login.usernameLength'), trigger: 'blur' }
  ],
  password: [
    { required: true, message: t('login.passwordRequired'), trigger: 'blur' },
    { min: 6, max: 20, message: t('login.passwordLength'), trigger: 'blur' }
  ]
}

// 当前语言名称
const languageName = computed(() => {
  const lang = appStore.language
  if (lang === 'zh-CN') return '简体中文'
  if (lang === 'en-US') return 'English'
  if (lang === 'fr-FR') return 'Français'
  return ''
})

// 切换语言
const changeLanguage = (info: any) => {
  appStore.setLanguage(info.key)
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 表单验证
    await loginFormRef.value?.validate()
    
    loading.value = true
    const success = await authStore.login(loginForm.username, loginForm.password)
    
    if (success) {
      message.success(t('login.loginSuccess'))
      
      // 获取重定向地址或默认跳转到dashboard
      const redirect = route.query.redirect as string
      router.push(redirect || '/dashboard')
    } else {
      message.error(t('login.loginFailed'))
    }
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/images/common/login-bg.svg') no-repeat center center;
  background-size: cover;
  
  .login-form-wrapper {
    width: 400px;
    padding: $spacing-xl;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow-base;
    
    .login-header {
      text-align: center;
      margin-bottom: $spacing-lg;
      
      .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: $spacing-sm;
        
        .logo-img {
          width: 40px;
          height: 40px;
          margin-right: $spacing-sm;
        }
        
        .system-title {
          font-size: $font-size-xl;
          font-weight: 600;
          margin: 0;
          color: $text-color-primary;
        }
      }
      
      .system-description {
        font-size: $font-size-base;
        color: $text-color-secondary;
        margin: 0;
      }
    }
    
    .login-form {
      .remember-me {
        display: flex;
        justify-content: space-between;
        
        .forgot-password {
          color: $primary-color;
          cursor: pointer;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
      
      .login-button {
        height: 40px;
      }
      
      .language-selector {
        text-align: center;
        margin-top: $spacing-lg;
        
        .language-link {
          color: $text-color-secondary;
          cursor: pointer;
          
          &:hover {
            color: $primary-color;
          }
          
          .language-text {
            margin-left: $spacing-sm;
          }
        }
      }
    }
  }
}

// 响应式调整
@include responsive(xs) {
  .login-container {
    .login-form-wrapper {
      width: 90%;
      max-width: 400px;
    }
  }
}
</style> 